<template>
	<view>
		<!-- 头部导航栏 -->

		<view class="topbar">
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<scroll-view class="scroll-view" scroll-x="true" @scroll="scroll">
				<view class="item" :class="{ active: curNav === item.id }" v-for="(item, index) in navList" :key="index" ref="curNav" @tap="switchNav(item.id, index)">
					<view class="desc">{{ item.name }}</view>
				</view>
				<view class="slide" :style="'transform: translateX(' + sliderOffset + 'px)'"></view>
			</scroll-view>
		</view>

		<!-- 视频 -->
		<mescroll-body @init="mescrollInit" @down="downCallback" :down="downOption" @up="upCallback" :up="upOption">
			<view class="video-list">
				<view class="video-item" v-for="(item, index) in videoList" :key="index">
					<view class="item-wrap">
						<view class="img-item">
							<image class="img" v-if="vid != item.vid" :src="item.coverUrl + $imgSuffix" @tap="playVideo(item.vid)"></image>
							<video
								class="img"
								v-if="vid == item.vid"
								autoplay
								enable-play-gesture="true"
								controls="true"
								show-center-play-btn="false"
								:poster="item.coverUrl"
								:src="videoUrl"
								@controlstoggle="controlstoggle"
							></video>
							<image class="playButton" src="/static/image/play.png" v-if="vid != item.vid" @tap="playVideo(item.vid)"></image>
							<view class="time ">
								<view class="icon-font">&#xe649;</view>
								<view>{{ item.playTime }}</view>
							</view>
						</view>

						<view class="desc ellipsis">{{ item.title }}</view>
						<view class="creater-bar flex-box">
							<view class="avactor-box flex-box">
								<view class="avactor" src=""></view>
								<view class="name">{{ item.creator[0].userName }}</view>
							</view>
							<view class="more"><text class="icon-font">&#xe700;</text></view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import { allvideo, getVideoUrl } from '@/api/video.js';

import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';

export default {
	mixins: [MescrollMixin],
	data() {
		return {
			vid: '',
			videoUrl: '',
			downOption: {
				auto: false
			},
			upOption: {
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				}
			},
			navList: [
				{
					name: '推荐',
					id: 34571
				},
				{
					name: 'LOCK直播',
					id: 23472
				},
				{
					name: '翻唱',
					id: 33485
				},
				{
					name: '广场',
					id: 4652
				},
				{
					name: '舞蹈',
					id: 658785
				},
				{
					name: '游戏',
					id: 62689
				},
				{
					name: '现场',
					id: 7456345
				}
			],
			curNav: '',
			sliderOffset: 0,
			scrollLeft: 0,
			videoList: []
		};
	},
	onReady() {
		if (!this.curNav) {
			this.switchNav(this.navList[0].id, 0);
		}
	},

	methods: {
		switchNav(id, index) {
			this.curNav = id;
			this._allvideo(id, data => {
				if (data) {
					this.videoList = data;
				}
			});
			this.$nextTick(function() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.active')
					.boundingClientRect(data => {
						this.sliderOffset = this.scrollLeft + data.left + data.width / 2 - 16;
					})
					.exec();
			});
		},
		scroll(e) {
			this.scrollLeft = e.detail.scrollLeft;
		},

		playVideo(vid) {
			getVideoUrl({
				id: vid
			}).then(res => {
				this.videoUrl = res.urls[0].url;
				this.vid = vid;
			});
		},

		controlstoggle() {
			console.log(1);
		},

		// mescroll 初始化
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		// 下拉刷新函数
		downCallback() {
			var that = this;
			this._allvideo(this.curNav, data => {
				if (data) {
					that.videoList = data;
				}
				that.mescroll.endSuccess();
			});
		},
		/*上拉加载的回调*/
		upCallback(page) {
			var that = this;
			var timestamp = new Date().getTime();
			this._allvideo(this.curNav, data => {
				if (data) {
					that.videoList = that.videoList.concat(data);
				}
				that.mescroll.endSuccess();
			});
		},

		_allvideo(id, callback) {
			var timestamp = new Date().getTime();
			allvideo({
				id,
				timestamp
			})
				.then(res => {
					res.data.forEach(e => {
						e.coverUrl = e.coverUrl.replace('http:', 'https:');
						e.playTime = this.$pubFuc.getDuration(e.playTime);
					});
					callback(res.data);
				})
				.catch(res => {
					callback();
				});
		}
	}
};
</script>

<style lang="scss">
.scroll-view {
	position: relative;
	white-space: nowrap;
	font-weight: 600;
	font-size: 34rpx;
	text-align: center;
	width: 100%;
	height: 86rpx;
	color: #333;
	border-bottom: 1px solid #e6e6e6;

	.item {
		display: inline-block;
		height: 86rpx;
		min-width: 126rpx;
		line-height: 86rpx;
		padding: 0 20rpx;
		transition: scale(1.5);

		&:active {
			background-color: #e6e6e6;
		}

		&.active {
			color: #f32628;
		}
	}

	.slide {
		position: absolute;
		width: 60rpx;
		height: 4rpx;
		left: 0;
		bottom: 0;
		background: #f32628;
		transition: transform 0.8s;
		z-index: 2;
		border-radius: 2rpx;
		/* #ifdef MP-WEIXIN */
		bottom: 40rpx;
		/* #endif */
	}
}

.video-list {
	color: #333;
	background-color: #f8f8f8;

	.video-item {
		width: 100%;
		background-color: #fff;
		margin-bottom: 20rpx;
		padding-top: 20rpx;

		.item-wrap {
			margin: 0rpx auto;
			width: 700rpx;
		}

		.img-item {
			position: relative;
			.time {
				display: flex;
				flex-wrap: nowrap;
				position: absolute;
				right: 8rpx;
				bottom: 10rpx;
				line-height: 50rpx;
				color: #fff;
				font-size: 28rpx;
				transform: scale(0.8);
				z-index: 10;
				.icon-font {
					margin-right: 5rpx;
				}
			}
		}

		.img {
			border-radius: 15rpx;
			width: 100%;
			height: 400rpx;
		}

		.desc {
			height: 70rpx;
			line-height: 70rpx;
			font-size: 30rpx;
			font-weight: 600;
			border-bottom: 1px solid #e6e6e6;
		}

		.playButton {
			position: absolute;
			width: 35rpx;
			height: 40rpx;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index: 20;
		}
	}

	.creater-bar {
		justify-content: space-between;
		height: 100rpx;
		line-height: 100rpx;
		align-items: center;

		.avactor-box {
			align-items: center;
		}

		.avactor {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 10rpx;

			background-color: #eee;
		}
	}
}
</style>
